<!--
* @FileDescription: 科室表格
* @Date: 2022年11月18日 17:55:14
* TODO:
* [] Demo
-->

<template>
	<div>
		<topBar
			ref="topBar"
			:serachItem="config[itemKey]"
			@refresh="refresh"
			@export="handleExport"
			@onSearch="onSearch"
		>
		</topBar>
		<el-table
			ref="resourceTable"
			v-loading="loading"
			:data="queueStatList.data"
			@selection-change="handleSelectionChange"
		>
			<el-table-column type="selection" width="55" align="center" />
			<!-- 根据不同资源显示不同的表头以及数据 -->
			<el-table-column
				v-for="(item, index) of config[itemKey].tableColumns"
				:label="item"
				align="center"
				:prop="index"
			>
				<template slot-scope="scope">
					<!-- 处理时间 -->
					<!-- <span v-if="config[itemKey]['handlerTime'].includes(index)">
						{{ handlerTime(scope.row[index]) }}
					</span>-->
					<span v-if="config[itemKey]['timeToDate'].includes(index)">
						{{ timeToDate(scope.row[index]) }}
					</span>
					<span v-else>
						{{ scope.row[index] }}
					</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" width="180">
				<template slot-scope="scope">
					<el-button type="text" @click="checkDetails(scope.row)"
						>查看</el-button
					>
					<el-button
						v-if="itemKey === '医生数据报表'"
						type="text"
						@click="fixDoctorData(scope.row)"
						>数据修正</el-button
					>
				</template>
			</el-table-column>
		</el-table>
		<!-- 科室数据嵌套 -->
		<el-drawer
			:title="drawerTitle"
			:visible.sync="showDetails"
			size="50%"
			append-to-body="true"
			custom-class="drawerTable"
		>
			<el-table :data="detailDocOfCounter.data">
				<el-table-column type="index" width="50" label="序号" />
				<el-table-column prop="staffName" label="医生姓名" width="180">
				</el-table-column>
				<el-table-column prop="counterName" label="诊室" width="180">
				</el-table-column>
				<el-table-column prop="avgWaitTime" label="平均等候时长">
					<template slot-scope="scope">
						{{ handlerTime(scope.row.avgWaitTime) }}
					</template>
				</el-table-column>
				<el-table-column prop="avgVisitTime" label="平均就诊时长">
					<template slot-scope="scope">
						{{ handlerTime(scope.row.avgVisitTime) }}
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button type="text" @click="checkDoctorDetails(scope.row)"
							>查看</el-button
						>
						<el-button type="text" @click="fixDoctorData(scope.row)"
							>数据修正</el-button
						>
					</template>
				</el-table-column>
			</el-table>
			<el-drawer
				:title="doctorDrawerTitle"
				:append-to-body="true"
				:visible.sync="showDocDetailsDrawer"
				size="80%"
			>
				<doctorTable
					:key="staffId"
					:counterId="counterId"
					:staffId="staffId"
					:queryParams="queryParams"
				></doctorTable>
			</el-drawer>

			<el-drawer
				:title="doctorDrawerTitle"
				:append-to-body="true"
				:visible.sync="showFixDataDrawer"
				size="80%"
			>
				<fixData
					:key="staffId"
					:counterId="counterId"
					:staffId="staffId"
					:queryParams="queryParams"
				></fixData>
			</el-drawer>
		</el-drawer>
		<!-- 医生数据嵌套 -->
		<el-drawer
			:title="doctorDrawerTitle"
			:append-to-body="true"
			:visible.sync="showDetailsOfDoc"
			size="80%"
		>
			<doctorTable
				:key="Math.random()"
				:staffId="staffId"
				:counterId="counterId"
				:queryParams="queryParams"
			></doctorTable>
		</el-drawer>
		<el-drawer
			:title="doctorDrawerTitle"
			:append-to-body="true"
			:visible.sync="showDocFixDataDrawer"
			size="80%"
		>
			<fixData
				:key="staffId"
				:staffId="staffId"
				:counterId="counterId"
				:queryParams="queryParams"
			></fixData>
		</el-drawer>
		<pagination
			v-show="queueStatList.total > 0"
			:total="queueStatList.total"
			:page.sync="queryParams.current"
			:limit.sync="queryParams.size"
			@pagination="pageChange"
		/>
	</div>
</template>

<script>
import topBar from './topBar'
import doctorTable from './doctorTable.vue'
import fixData from './fixData.vue'
import dayjs from 'dayjs'

export default {
	name: 'Demo',
	components: { topBar, doctorTable, fixData },
	props: {
		queueStatList: { type: Object, default: {} }, // 队列数据
		itemKey: { type: String, default: '科室数据报表' },
		detailDocOfCounter: { type: Object, default: {} }, // 科室下医生数据
		queryParams: { type: Object, default: {} },
	},
	data() {
		return {
			showDetailsOfDoc: false,
			showFixDataDrawer: false, // 显示数据修正抽屉
			showDocDetailsDrawer: false, //显示查看医生数据抽屉
			showDocFixDataDrawer: false, // 显示数据修正抽屉（通过医生数据页面）
			showSearch: true,
			loading: false,
			config: {
				科室数据报表: {
					title: '科室名称',
					key: 'bizinfoName',
					tableColumns: {
						name: '科室名称',
						createTime: '开始时间',
						end: '结束时间',
						reportValue: '报到人数',
						completeValue: '就诊人数',
						avgWaitTime: '平均等待时长',
						avgVisitTime: '平均就诊时长',
					},
					handlerTime: ['avgVisitTime', 'avgWaitTime'],
					timeToDate: ['createTime', 'end'],
				},
				医生数据报表: {
					title: '医生名称',
					key: 'staffName',
					tableColumns: {
						name: '医生名称',
						reportValue: '报到人次',
						callValue: '叫号人次',
						avgWaitTime: '平均等待时长',
						completeValue: '诊结人次',
						avgVisitTime: '平均问诊时长',
					},
					handlerTime: ['avgVisitTime', 'avgWaitTime', 'createTime', 'end'],
					timeToDate: ['createTime', 'end'],
				},
			},
			showDetails: false, // 是否显示详情
			detailsData: [], // 查看科室详情数据
			currentClickRow: {}, // 科室查看点击
			currentDocClickRow: {}, // 医生查看点击
			staffId: '', // 查看医生数据ID
			counterId: '', // 查看的科室ID
		}
	},
	created() {},
	watch: {
		// itemKey(val) {
		// 	this.$refs.topBar.resetQuery()
		// },
	},
	computed: {
		// 科室抽屉标题
		drawerTitle() {
			if (this.currentClickRow.name) {
				return `科室医生数据报表-${this.currentClickRow.name}`
			}
		},
		// 医生抽屉标题
		doctorDrawerTitle() {
			let isCounter = this.itemKey == '科室数据报表'
			if (isCounter) {
				return `科室医生数据报表-${this.currentDocClickRow.counterName}-${
					this.currentDocClickRow.staffName
				}`
			} else {
				return `科室医生数据报表-${this.currentClickRow.counterName ||
					this.currentClickRow.name}`
			}
		},
	},
	methods: {
		// 搜索
		onSearch(query) {
			this.queryParams = query
			this.$emit('pageChange', query)
		},
		handleSelectionChange(selection) {
			this.$emit('handleSelectionChange', selection)
		},
		refresh() {
			this.$emit('refresh')
		},
		handleExport() {
			this.$emit('handleExport')
		},
		// 查看当前行详情
		checkDetails(data) {
			if (!data.staffName) {
				this.currentClickRow = data
			}
			this.currentDocClickRow = data

			if (this.itemKey == '科室数据报表') {
				this.showDetails = true
			} else {
				this.staffId = data.id
				this.counterId = data.counterId
				this.showDetailsOfDoc = true
			}
			this.$emit('checkDetails', data.id, this.queryParams)
		},
		// 查看医生数据详情
		checkDoctorDetails(data) {
			this.staffId = data.staffId
			this.currentDocClickRow = data
			this.counterId = data.counterId
			this.showDocDetailsDrawer = true
		},
		// 数据修正
		fixDoctorData(data) {
			if (!data.staffName) {
				this.currentClickRow = data
			}
			this.staffId = data.staffId ? data.staffId : data.id
			this.counterId = data.counterId
			this.currentDocClickRow = data
			if (this.itemKey == '科室数据报表') {
				this.showFixDataDrawer = true
			} else {
				this.showDocFixDataDrawer = true
			}
		},
		// 页码改变时
		pageChange() {
			this.$emit('pageChange', this.queryParams)
		},
		handlerTime(time) {
			let minus = Math.floor(time / 60) % 601
			let second = time % 60
			let hours = Math.floor(time / 3600) % 60
			return `${hours}时${minus}分${second}秒`
		},
		timeToDate(time) {
			if (!time) return '无'
			return dayjs(time).format('YYYY-MM-DD')
		},
	},
}
</script>
<style lang="scss" scoped>
.drawerTable {
	::deep .el-drawer__header > :first-child {
		text-align: center;
	}
}

::v-deep .el-drawer__body {
	overflow: scroll;
}
::v-deep .el-drawer.rtl{
    direction: ltr;

}
::v-deep .el-drawer.rtl.drawerTable {
    direction: ltr;
}
</style>
